<template>
	<view class="bill_type">
		<view 
			class="bill_type_item" 
			v-for="item in showBillTypeList" 
			:key="item.id">
			<view
				@click="chooseBillTypeFun(item)" 
				:class="['item',{'itemChecked' :item.id === checkedBillType}]">
				<view class="icon" v-if="item.iconPath">
					<Avatar :radius="iconRadius" size="35rpx" :fileName="item.iconPath" :joinUrlFun="joinIconFun"/>
				</view>
				<view class="name text_ellipsis">
					{{item.name}}
				</view>
			</view>
			<view class="bill_type_tips" v-if="isShowEdit">
				{{item.allowSet ? '双击编辑' : ''}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref, watch} from 'vue'
	import Avatar from '@/components/Avatar/Avatar.vue'
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	
	const {
		primary_light_color,
		primary_cool_color,
		primary_hot_color,
		primary_line_color,
		shallow_text_color,
		cool_border_color,
		primary_text_color
	} = dynamicStyle_store.dormitoryStyle	
	
	const emits=defineEmits(['chooseBillTypeFunEmit'])
	const props=defineProps({
		showBillTypeList:{
			type:Array
		},
		checkedBillType:{
			type:String
		},
		iconRadius:{
			type:String,
			default:'0rpx'
		},
		joinIconFun:{
			type:Function,
			default:joinSystemPath
		},
		isShowEdit:{
			type:Boolean,
			default:false
		}
	})
	
	const checkedBillType=ref()
	
	watch(()=>props.checkedBillType,()=>{
		checkedBillType.value = props.checkedBillType
	},{immediate:true})
	
	const chooseBillTypeFun=(item)=>{
		checkedBillType.value = item.id
		emits('chooseBillTypeFunEmit',item)
	}
</script>

<style lang="less">
	.text_ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.bill_type{
		width: 100%;
		display: grid;
		max-height: calc(30vh);
		grid-template-columns: repeat(3,1fr);
		justify-items: center;
		gap: 20rpx;
		overflow-y: scroll;
		.bill_type_item{
			.item{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 200rpx;
				height: 70rpx;
				border: 1px solid v-bind(cool_border_color);
				border-radius: 50rpx;
				color: v-bind(primary_text_color);
				.icon{
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 2rpx;
				}
				.name{
					max-width: 70%;
					font-size: 26rpx;
				}
			}
			
			.itemChecked{
				border: 1px solid v-bind(primary_hot_color);
				color: v-bind(primary_hot_color);
			}
			.bill_type_tips{
				font-size: 22rpx;
				color: v-bind(shallow_text_color);
				width: 100%;
				height: 24rpx;
				display: flex;
				justify-content: center;
			}
		}
	}
</style>